<template>
  <div class="First">
        <div class="silde_box">
      <slide-verify
      class="silde_box"
        ref="block"
        :slider-text="text"
        :accuracy="accuracy"
        @again="onAgain"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        
      ></slide-verify>
      <el-button class="btn" round @click="handleClick">点我刷新</el-button>
      <!-- <button class="btn" @click="handleClick">点我刷新</button> -->
      <div class="massage">{{ msg }}</div>

    </div>
  </div>

  </template>
   
  <script lang="ts" >
  import { defineComponent, ref } from "vue";
  // 局部注册组件，需要单独引用组件样式
  // 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
  import SlideVerify from "vue3-slide-verify"
  import type { SlideVerifyInstance } from "vue3-slide-verify"
  import "vue3-slide-verify/dist/style.css"
  import { ElMessage } from 'element-plus'

  // import {eventBus} from '../../../main.js'
   //导入路由
    import {useRoute,useRouter} from 'vue-router' 

    
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { useEventBus } from "@vueuse/core";
import { emit } from "process";

  export default defineComponent({
    components: { SlideVerify },
    
    setup() {
        //定义路由器
      const $router=useRouter()
        //定义路由
      const $route=useRoute()
      const msg = ref("");
      const block = ref<SlideVerifyInstance>();
      const comeback = ref()
      const onAgain = () => {
        ElMessage({
        showClose: true,
        message: '检测到非人为操作的哦！ try again',
        type: 'error',
  })
        msg.value = "检测到非人为操作的哦！ try again";
        // 刷新
        block.value?.refresh();
      };
   

      const onSuccess = (times: number) => {  
        ElMessage({
        message: '验证成功',
        type: 'success',
      })
        msg.value = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
      
        //跳转到后台页面，要用到router对象
        setTimeout(() => {
          //-------------------------------
          $router.back()
        }, 2000);
      };
   
      const onFail = () => {
        ElMessage({
        showClose: true,
        message: '验证不通过',
        type: 'error',
  })
        
        msg.value = "验证不通过";
      };
   
      const onRefresh = () => {
        ElMessage({
        showClose: true,
        message: '刷新成功',
        type: 'success',
      })

        msg.value = "刷新成功";
      };
   
      const handleClick = () => {
        // 刷新
        block.value?.refresh();
        msg.value = "";
      };
      
      return {
        block,
        msg,
        text: "向右滑动->",
        accuracy: 1,
        onAgain,
        onSuccess,
        onFail,
        onRefresh,
        handleClick,
      };
    },
  });
  </script>
  <style scoped>
    .First{
      position: absolute;
      width: 100%;
      height: 790px;
      background-color: rgb(253, 253, 253);
      /* border: 1px solid seagreen; */
    }
  .silde_box{
    margin:0 auto;
  }
  .btn{
    margin: 20px 270px;
    
  }
  .massage{
    /* position: absolute;
    top: 430px;
    left: 270px; */
    display: flex;
    padding-left: 255px;
    color: rgb(59, 55, 49);

  }
  </style>